<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            /* 设置在父元素上的属性:
    1.display: flex;  开启flex 弹性布局
    2.flex-direction: column;  调整主轴方向 (默认为水平方向)
    3.flex-wrap：        控制是否换行，默认是不换行，如果多个子元素的总宽度大于父元素，就会全部自动缩小
    4.flex-flow ：flex-direction和flex-wrap的简写形式
    5.justify-content调整主轴对齐（水平对齐） , 子盒子如何在父盒子里面水平对齐方式
    
               设置在子元素上的属性:
    1.flex: 1;       简写属性, 每个伸缩项各占一份
    2.flex-grow    可以拓展子元素的宽度，设置当前元素应该占据剩余空间的比例值 */
         .box4 {
      width: 500px;
      height: 300px;
      background-color: red;
      display: flex;
    }
    span[class*=item]{
        width: 100px;
        height: 200px;
    }
    .box4 .item1{
        background-color: pink;
        /* 剩余空间100px,占据剩余空间3/6=50px 时间item1的宽度：100+50=150px */
        flex-grow: 3;
    }
    .box4 .item2{
        background-color:aliceblue;
        flex-grow: 1;
    }
    .box4 .item3{
        background-color:aqua;
        flex-grow: 1;
    }
    .box4 .item4{
        background-color:blue;
        flex-grow: 1;
    }
  
    </style>
</head>
<body>
    <div class="box4">
    <span class="item1">1</span >
    <span class="item2">2</span>
    <span class="item3">3</span>
    <span class="item4">4</span>
  </div>
</body>
</html>